<template>
  <el-dialog :title="title" :visible.sync="open" width="800px" append-to-body @close="cancel">
    <el-form ref="form" :model="form" :rules="rulesExtra" label-width="120px">
      <el-form-item label="人员" prop="id">
        <user-drug-select v-model="form.id" placeholder="请选择人员" :readonly="true"/>
      </el-form-item>
      <el-form-item label="身份证号码" prop="idno">
        <el-input v-model="form.idno" readonly/>
      </el-form-item>
      <el-form-item label="中止/终止原因" prop="zzyy">
        <el-select v-model="form.zzyy" placeholder="请选择原因" style="width: 100%">
          <el-option
            v-for="dict in dict.type.zzyy"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item prop="zzws" label="中止/终止文书">
        <fileUpload v-model="form.zzws" />
      </el-form-item>
      <el-form-item prop="qmjcws" label="期满解除文书" v-if="form.zzyy==='9'">
        <fileUpload v-model="form.qmjcws" />
      </el-form-item>
      <el-form-item prop="fxdjList" label="风险等级">
        <el-checkbox-group v-model="form.fxdjList">
          <el-row>
            <el-col
              v-for="(item, index) in dict.type.fxdj"
              :key="index"
              :span="24"
            >
              <el-checkbox :label="item.value">
                {{ item.label }}
              </el-checkbox>
            </el-col>
          </el-row>
        </el-checkbox-group>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button :loading="buttonLoading" type="primary" @click="submitForm">确 定</el-button>
      <el-button @click="cancel">取 消</el-button>
    </div>
  </el-dialog>
</template>

<script>
import {updateUser} from "@/api/user/userInfo";

export default {
  name: "TerminateUser",
  dicts: ['fxdj','zzyy'],
  data() {
    return {
      // 按钮loading
      buttonLoading: false,
      // 遮罩层
      loading: true,
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 查询参数
      // 表单参数
      form: {},
      // 表单校验
      rulesExtra: {
        zzyy: [
          {required: true, message: "中止/终止不能为空", trigger: "blur"}
        ],
        zzws: [
          {required: true, message: "中止/终止文书", trigger: "blur"}
        ],
        fxdjList: [
          { required: true, message: "风险等级不能为空", trigger: "change" },
        ],
      }
    };
  },
  methods: {
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        id: undefined,
        idno: undefined,
        zzyy: undefined,
        fxdjList: [],
      };
      this.resetForm("form");
    },
    /** 新增按钮操作 */
    openTerminate(userInfo) {
      this.reset();
      this.open = true;
      this.title = "中止/终止吸毒人员";
      this.form = userInfo
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          this.buttonLoading = true;
          updateUser(this.form)
            .then(() => {
              this.$modal.msgSuccess("中止/终止成功");
              this.$emit('refresh')
              this.cancel()
            })
            .finally(() => {
              this.buttonLoading = false;
            })
        }
      });
    },
  }
};
</script>
